<template>
	<view class="main-cont box box-tb">
		<view class="stu-main">
			<view class="top box box-pack-start box-align-center">
				{{bj.bjmc}}（{{stuList.length}}人）
			</view>
			<view class="title box box-align-center">
				<view class="check"></view>
				<view class="name">姓名</view>
				<view class="score">学号</view>
			</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in stuList" :key="index"
					:name="item.id" :label-disabled="false">
					<view class="list box box-align-center">
						<view class="name box box-align-center box-pack-start">
							<u-avatar :src="item.icon" mode="circle" size="72"></u-avatar>
							<view class="ml10">
								{{item.name}}
							</view>
						</view>
						<view>{{item.sn}}</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="btn box box-align-center box-pack-center">
			<view class="reset-confirm-btn" @click="sure()">
				确认添加
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bj:uni.getStorageSync("dclass"),
				stuList:[],
				selectId: []
			};
		},
		onLoad() {
			this.listClassStu();
		},
		methods: {
			listClassStu(){
				this.$api.post({url: '/dstudent/listClassStuNotInPfxz',method: 'post'}, {classid:this.bj.id}).then(res => {
					if(res.code==0){
						//console.log(res);
						this.stuList = res.list;
					}
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.selectId.push(e)
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.selectId = e;
			},
			//提交
			sure() {
				//提交选中的值
				if (this.selectId.length == 0) {
					this.$refs.uToast.show({
						title: '请选择成员',
						type: 'warning',
					})
					return false;
				}
				let params = {
					classid:this.bj.id,
					userids:this.selectId
				};
				
				this.$api.post({url: '/dstudent/addPfxzUser',method: 'post'}, {str:JSON.stringify(params)}).then(res => {
					this.$refs.uToast.show({
						title: '添加成功',
						type: 'success'
					})
					uni.navigateTo({
						url: "/stupageHome/scoreGroup",
					})
				})
			},


		}
	};
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;

		.stu-main {
			box-sizing: border-box;
			width: 722rpx;
			height: 100%;
			margin: 20rpx auto 0;
			background-color: #fff;
			border-radius: 20px;
			padding-bottom: 200rpx;
			overflow-y: auto;

			.top {
				padding: 0 40rpx;
				height: 98rpx;
				margin-bottom: 2rpx solid #F0F1F8;

			}

			.title {
				width: 100%;
				height: 107rpx;

				


			}
		}
		.list {
			width: 100%;
			height: 100%;
		}
		.check {
			width: 100rpx;
		}
		.sort {
			text-align: center;
			width: 100rpx;
		}
		
		.name {
			text-align: left;
			width: 345rpx;
		}
		
		.score {
			text-align: center;
			width: 100rpx;
		}
		.btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			background-color: rgba(255,255,255,.9);
			
			.reset-confirm-btn {
				width: 466rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>
